// 收入详情
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { Container, Content } from 'native-base'
import HeaderWhite from '../../../components/header/headerWhite'
import commonStyle from '../../../libs/commonStyle'
import { statList, addStatToList } from './data'
import Tab from './tab/index'
import Iconfont from '../../../components/iconfont'

import { connect } from 'react-redux' // 引入connect函数
import * as incomeAction from '../../../redux/actions/income'

class IncomeDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      statList: statList
    }
  }

  componentWillMount () {
    this.props.getData()
  }

  render () {
    const { statList } = this.state
    const { stat, isSuccess, errMsg } = this.props
    const list = addStatToList(statList, stat)
    return (
      <Container>
        <HeaderWhite title='收入详情' hasLeft />
        <Content>
          <View
            style={[
              commonStyle.flexRow,
              commonStyle.flexCenter,
              commonStyle.flexWrap,
              commonStyle.borderBottom,
              commonStyle.borderRight,
              commonStyle.shadowGray,
              commonStyle.circle10
            ]}
          >
            {list.map((item, index) => {
              return (
                <View
                  key={item.title}
                  style={[
                    commonStyle.p20,
                    commonStyle.flexCenter,
                    styles.item
                  ]}
                >
                  <Text style={[commonStyle.colorBlack2, commonStyle.f26]}>
                    {item.title}
                  </Text>
                  <View
                    style={[
                      commonStyle.flexRow,
                      commonStyle.flexCenter,
                      commonStyle.mt10
                    ]}
                  >
                    <Iconfont name='money4' size={10} color='#666' />
                    <Text
                      style={[
                        commonStyle.h3,
                        commonStyle.f32,
                        commonStyle.ml10
                      ]}
                    >
                      {item.amount}
                    </Text>
                  </View>
                </View>
              )
            })}
          </View>
          <View style={[commonStyle.mt30]}>
            <Tab />
          </View>
        </Content>
      </Container>
    )
  }
}

const styles = StyleSheet.create({
  item: {
    width: '33.33333333333%',
		borderWidth: 0.5,
		borderStyle: 'solid',
		borderColor: '#f5f5f5',
  }
})

export default connect(
  state => ({
    stat: state.income.stat,
    isSuccess: state.income.isSuccess,
    errMsg: state.income.errMsg
  }),
  dispatch => ({
    getData: () => dispatch(incomeAction.income())
  })
)(IncomeDetail)
